<template>
	<main>
		<mt-header fixed title="编辑自选">
			<mt-button slot="left" icon="back" @click="goBack"></mt-button>
		</mt-header>
		<div class="mt50 fontc1 tl bgwhite">
			<h5 class="fs16 lh40 pl20">我的自选</h5>
			<div class="ml15 mr15 pb20">
				<div class="select fs14 clearfix">
					<span class="lh25 white fl" @click="subSelect(item)" v-for="(item,idx) in select" :key="idx"><i>{{item.varietyName}}</i></span>
					<p class="fs12 fontc3 tc lh50" v-show="select.length===0">您还没有添加自选</p>
				</div>
				<p class="fs12 fontc3 tc lh50" v-show="select.length>0">点击删除</p>
			</div>
		</div>
		<div class="bgwhite mt10">
			<div class="flex bar pt5">
				<span class="flex1 lh40" :class="{active:item&&item.includes(tab)}" v-for="(item,i) in this.getAllClass" :key="i">
					<i class="fs16" @click="tab=item">{{item}}</i>
				</span>
			</div>

			<div class="ml15 mr15 pt15">
				<div class="select list lh40 clearfix">
					<span @click="addSelect(item)" class="lh25 white fl" v-show="item.typeName===tab&&(select.findIndex((obj,i) => obj.varietyName===item.varietyName)<0)"
					 v-for="(item,idx) in this.allVariety" :key="idx"><i>{{item.varietyName}}</i></span>
				</div>
				<p class="fs12 fontc3 tc lh50">点击添加到我的自选</p>
			</div>
		</div>

		<p class="fs12 fontc3 lh50 tc">自选仅支持在首页显示排序靠前的12个报价产品</p>
	</main>
</template>
<script>
	import {
		Actionsheet,
		Field,
		Button,
		Picker
	} from "mint-ui";
	import Vue from "vue";
	import { mapState, mapGetters, mapMutations } from 'vuex'

	export default {
		name: "Select",
		data() {
			return {
				loading: false,
				listVariety: null,
				select: [],
				tab: '国际期货',
			};
		},
		mounted() {
			this.getRankQuotaVariety();
			let select = storage.getItem('select');
			select && (this.select = JSON.parse(select));

		},
		computed: {
			...mapState(["allVariety", "allTypeVariety"]),
			getAllClass() {
				if (this.allVariety) {
					var arr = [];
					this.allVariety.forEach(value => {
						if (arr.indexOf(value.typeName) <= -1) {
							arr.push(value.typeName);
						}
					});
					return arr;
				} else {
					return [];
				}
			},
		},
		methods: {
			...mapMutations(['setAllVariety', 'setAllTypeVariety']),
			getRankQuotaVariety() {
				if (this.loading) return;
				this.loading = true;
				function quota() {
					return axios.get(
						"//quota.zcmrr.com/quota/quota/getAllNewlyQuotaData.do?_=" +
						new Date().getTime()
					);
				}

				function variety() {
					return axios.get(
						"/order/variety/getTypeVariety.do?_=" + new Date().getTime()
					);
				}

				axios.all([quota(), variety()]).then(
					axios.spread((quota, variety) => {
						this.loading = false;
						quota = quota.data;
						variety = variety.data;
						if (quota.code === 200 && variety.code === 200) {
							quota = quota.data;
							variety = variety.data;
							Object.keys(variety).map((vari, idx) => {
								variety[vari].forEach((item, i) => {
									quota.forEach((q, o) => {
										if (item.varietyType === q.varietyType) {
											item = Object.assign(item, q);
										}
									});
								});
							});
							let typeVariety = variety;
							let listVariety = [];

							// 处理分类
							Object.keys(variety).map((vari, i) => {
								variety[vari].forEach((item, index) => {
									listVariety.push(item);
								});
							});
							this.listVariety = listVariety;
							this.$store.commit("setAllVariety", listVariety);
							this.$store.commit("setAllTypeVariety", typeVariety);
						}
					})
				);
			},
			addSelect(item) {
				let arr = this.select;
				let idx = arr.find((obj, idx) => {
					return obj.varietyName === item.varietyName;
				});
				if (idx) return;
				arr.push(item);
				this.select = arr;
				storage.setItem('select', JSON.stringify(this.select));
			},
			subSelect(item) {
				let arr = this.select;
				let idx = arr.findIndex((obj, idx) => {
					return obj.varietyName === item.varietyName;
				})


				arr.splice(idx, 1);
				this.select = arr;

				storage.setItem('select', JSON.stringify(this.select));
			},
			goBack() {
				window.history.length > 1
					? this.$router.go(-1)
					: this.$router.push("/mine");
			}
		}
	};
</script>
<style scoped>
	.select span {
		width: 25%;
		margin-bottom: 8px;
	}

	.select span i {
		background-color: #FEAA37;
		display: block;
		font-size: 14px;
		margin-left: 5px;
		margin-right: 5px;
		text-align: center;
		border-radius: 2px;
	}

	.bar {
		justify-content: space-between;
		border-bottom: 1px solid #F5F5F7;

	}

	.bar span i {
		border-bottom: 2px solid transparent;
		line-height: 40px;
		display: inline-block;
	}

	.bar span.active i {
		border-color: #F96D46;
		color: #F96D46;
	}

	.select.list span i {
		background-color: #F4F4F4;
		color: #5C5C66;
	}
</style>